<template>
    <div>
        <!--excel表格容器-->
        <div id="luckysheet" class="123" :style="{margin:'0px',padding:'0px',width:'100%',height:contentHeight+'px'}"> </div>
    </div>
</template>
    
    
<script>
import LuckyExcel from 'luckyexcel'
import { read, write } from 'xlsx'
export default {
    name: "LuckSheetExecl",
    props: {
        fileUrl: {
            type: String,
            default: '',
        },
        fileType: {
            type: String,
            default: ''
        },
        fileName: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            contentHeight: 0,
        }
    },
    mounted() {
        if (this.fileType == 'xls') {
            this.xhrUtils(this.fileUrl);
        }else{
            //加载文件内容
            this.openExcel({ url: this.fileUrl, name: this.fileName })
        }

    },
    //监听重新渲染组件
    watch: {
        fileUrl() {
            if (this.fileType == 'xls') {
                this.xhrUtils(this.fileUrl);
                return;
            }
            this.openExcel({ url: this.fileUrl, name: this.fileName })
        }
    },
    methods: {
             //下载
        xhrUtils(url) {
            let that = this
            const xhr = new XMLHttpRequest()
            xhr.open('get', url, true)
            xhr.responseType = 'arraybuffer'
            xhr.onload = () => {
                if (xhr.status === 200) {
                    const data = new Uint8Array(xhr.response)
                    that.xlsToXlsx(data)
                } else {
                    console.log(xhr, 'xhr-error')
                    // 弹框提示
                    Message({
                        type: 'error',
                        message: '预览失败，请下载查看'
                    })
                }
            }
            xhr.send();
        },
        //.xls文件转.xlsx
        xlsToXlsx(data) {
            // .xls文件转.xlsx
            const workbook = read(data, { type: 'array' })
            // 将工作簿（workbook）写入XLSX格式的文件
            const xlsxFile = write(workbook, { bookType: 'xlsx', type: 'array' })
            const blob = new Blob([xlsxFile], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

            const url = URL.createObjectURL(blob);
            this.openExcel({ url: url, name: this.fileName })
        },
        //渲染excel
        openExcel({ url, name }) {
            //动态计算高度
            const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            this.contentHeight = totalHeight - 230;
            this.$nextTick(() => {
                LuckyExcel.transformExcelToLuckyByUrl(url, name, (exportJson, luckysheetfile) => {
                    if (exportJson.sheets == null || exportJson.sheets.length === 0) {
                        console.error('无法读取excel的内容');
                        return
                    }
                    console.log("解析出来的数据",exportJson);
                    const firstData = []
                    const secondData = {}
                    for (let i = 0; i < exportJson.sheets.length; i++) {
                        firstData[i] = {
                            name: exportJson.sheets[i].name,
                            index: exportJson.sheets[i].index,
                            order: exportJson.sheets[i].order,
                            status: exportJson.sheets[i].status,
                            config: exportJson.sheets[i].config,
                        }
                        firstData[i].config.row = 10
                        parseInt(exportJson.sheets[i].status) === 1 ? (firstData[i].celldata = exportJson.sheets[i].celldata) : 0 == 0
                        secondData[exportJson.sheets[i].index] = exportJson.sheets[i].celldata
                    }
                    //luckysheet生成网页excel
                    window.luckysheet.destroy()
                    window.luckysheet.create({
                        lang: 'zh',
                        container: 'luckysheet',//设定DOM容器的id
                        showtoolbar: false,//是否显示工具栏
                        showinfobar: false,//是否显示顶部信息栏
                        showstatisticBar: true,//是否显示底部计数栏
                        sheetBottomConfig: false,//sheet页下方的添加行按钮和回到顶部按钮配置
                        allowEdit: false,//是否允许前台编辑
                        enableAddRow: false,//是否允许增加行
                        enableAddCol: false,//是否允许增加列
                        sheetFormulaBar: false,//是否显示公式栏
                        data: exportJson.sheets,//表格内容
                        enableAddBackTop: true,//返回顶部
                        title: exportJson.info.name,//表格标题
                        sheetRightClickConfig: {
                            delete: false,//删除
                            copy: false,//复制
                            rename: false,//重命名
                            color: false,//更改颜色
                            hide: false,//隐藏，取消隐藏
                            move: false,//向左移，向右移
                        },
                        showsheetbarConfig: {
                            add: false,
                        },
                        devicePixelRatio: window.devicePixelRatio,//分辨率
                        defaultFontSize: 12,//默认字体大小
                        cellRightClickConfig: {
                            copy: false,//复制
                            copyAs: false,//复制为
                            paste: false,//粘贴
                            insertRow: false,//插入行
                            insertColumn: false,//插入列
                            deleteRow: false,//删除选中行
                            deleteColumn: false,//删除选中列
                            deleteCell: false,//删除单元格
                            hideRow: false,//隐藏选中行和显示选中行
                            hideColumn: false,//隐藏选中列和显示选中列
                            rowHeight: false,//行高
                            columnWidth: false,//列宽
                            clear: false,//清除内容
                            matrix: false,//矩阵操作选区
                            sort: false,//排序选区
                            filter: false,//筛选选区
                            chart: false,//图表生成
                            image: false,//插入图片
                            link: false,//插入链接
                            data: false,//数据验证
                            cellFormat: true,//设置单元格格式
                        },
                    })
                })
            })
        }
    }
}
</script>
    